<template>
    <div style="">
        <span class="time" id="time">
            {{ nowTime }}
        </span>
        <span class="hour" style="">
            {{ time.hour }}
        </span>
        <a class ="spilt">:</a>
        <span class="minitus">{{ time.minitus }}</span>
        <a class="spilt">:</a>
        <span class="second">{{ time.second }}</span>
    </div>
</template>

<script>
export default{
    name:"DateUtils",
    props:["s"],
    data(){
        return {
            time:{
                hour: "",
                minitus: "",
                seconds: "",
            },
            nowTime:"",
            week:[
                "星期天",
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六",
            ]
        };
    },
    mounted(){
        this.dataTime();
    },
    methods:{
        dataTime(){
            this.timeFormat();
            setTimeout(()=>{
                this.dataTime();
            },1000);
        },
        timeFormat(){
            const newtime=new Date();
            this.time.hour=this.getIncrease(newtime.getHours(),2);
            this.time.minitus=this.getIncrease(newtime.getMinutes(),2);
            this.time.second=this.getIncrease(newtime.getSeconds(),2);
            this.nowTime=
            this.getIncrease(newtime.getFullYear(),4)+"年"+
            this.getIncrease(newtime.getMonth()+1,2)+"月"+
            this.getIncrease(newtime.getDate(),2)+"日"+
            this.week[newtime.getDay()];
        },
        getIncrease(num,len){
        var increase="";
        for(var i=0;i<len;i++){
            increase+="0";
        }
        return (increase+num).slice(-len);
        }

    }
}
</script>

<style scoped>
.txt-data .time{
    font-size:1rem;
    margin-right:0.5rem;
}
.spilt{
    animation:shark 1s step-end infinite;
    vertical-align:center;
    margin-left:2px;
    margin-right:2px;
}
@keyframes shark{
    0%,
    100% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
}
</style>